<!DOCTYPE html>
<html class="x-admin-sm">
    {include file='public/header'}
    <script src="/admin/xadmin/lib/layui/upload.js" charset="utf-8"></script>
    <style>
        .layui-form-label {
            width: 110px;
        }
        .layui-input-block {
            margin-left: 140px;
        }
    </style>
    <body>
        <div class="x-body">
            <form class="layui-form" lay-filter="formAjax">
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>openid:
                    </label>
                    <div class="layui-input-block">
                        <select class="project-select" style="width: 150px;" id="selectOne" name="selectOne" lay-filter="selectOne">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>关联群id:
                    </label>
                    <div class="layui-input-block">
                        <select class="project-select" style="width: 150px;" id="selectTwo" name="selectTwo" lay-filter="selectTwo">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>群名称
                    </label>
                    <div class="layui-input-block">
                        <input type="text" name="group_name" id="group_name" placeholder="请输入群名称" required="required" lay-verify="required" autocomplete="off" class="layui-input" value=""/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>有效期
                    </label>
                    <div class="layui-input-block">
                        <input type="text" name="expiration_day" id="expiration_day" placeholder="请选择有效期" required="required" lay-verify="required" autocomplete="off" class="layui-input" value=""/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>群口令
                    </label>
                    <div class="layui-input-block">
                        <input type="text" name="password" id="password" placeholder="请输入群" required="required" lay-verify="required" autocomplete="off" class="layui-input" value=""/>
                    </div>
                </div>
                <input type="hidden" name="id" id="id" value=""/>
                <button id="submitData" class="layui-btn" lay-submit lay-filter="submitData" style="display: none;"/>

            </form>
        </div>
        <script>
            let params = {
                addUrl: '/admin/openDouyin/postGroupPassword'
            }
            function getOpenidList() {
                Ajax(`/admin/openDouyin/getOpenId`, {}, 'get').then(res => {
                    if (res.code === 200) {
                        console.log("res---", $("#selectOne"))
                        $.each(res.data, function (index, item) {
                            $('#selectOne').append(new Option(item.short_id, item.open_id));
                        });
                        layui.form.render("select");

                    }
                });
            }
            getOpenidList()
            layui.use([
                'layer', 'element', 'form', 'upload',"laydate"
            ], function () {
                form = layui.form;
                let layDate = layui.laydate;
                // 监听 第一级的select 事件
                form.on('select(selectOne)', function (data) {
                    var fatherID = data.value; // 获取选中的值
                    var text = data.elem[data.elem.selectedIndex].text; // 获取选中的文本
                    if (fatherID !== '' && fatherID) {
                        Ajax(`/admin/openDouyin/getGroupFans?open_id=${fatherID}`, {}, 'get').then(res => {
                             $( "#selectTwo option" ).remove();
                            if (res.code === 200) {
                                $.each(res.data.data, function (index, item) {
                                    $('#selectTwo').append(new Option(item.group_name, item.id));
                                });
                                layui.form.render("select");
                            }
                        });

                    }
                });
                layDate.render({
                elem: '#expiration_day'
                ,type: 'date'
            });
                let guanid = "";
                let text = ""
                // 监听 第二级的select 事件
                form.on('select(selectTwo)', function (data) {
                    guanid = data.value; // 获取选中的值
                    text = data.elem[data.elem.selectedIndex].text; // 获取选中的文本
                });
                form.on('submit(submitData)', function (data) {
                    var formData = data.field;
                    formData.group_fans_id = guanid;
                    let url = params.addUrl;
                    layer.confirm('确认此操作吗？', function () {
                        if (confirm) {
                            Ajax(url, formData).then(data => {
                                if (data.code === 200) {
                                    layer.msg(data.message, {
                                        icon: 6,
                                        time: 1000
                                    }, function () { // 关闭当前frame
                                        x_admin_close();
                                        // 可以对父窗口进行刷新
                                        x_admin_father_reload();

                                    });
                                }
                            });
                        } else {
                            x_admin_close();
                            // 可以对父窗口进行刷新
                            x_admin_father_reload();
                        }

                    });

                    return false
                });
            })
        </script>
    </body>

</html></html></body></html>
